<template>
    <div>
        <div class="wrapper">
            <div class="title">
                <span>{{province}}</span>
            </div>

            <ul v-if="data.length <= 2">
                <li v-for="item of data" :key="item.school_name">
                <!-- 超过两个学校的省份，中间栏目只显示两个，查看更多需要点击按钮然后侧边显示 -->
                        <div class="img-wrapper ">
                            <img class="img" :src="item.icon_url">
                            <span class="text">{{item.school_name}}</span>
                            <span class="text badge badge-pill badge-danger">Rank：{{item.order}}</span>
                            <span class="text badge badge-pill badge-primary">{{item.dual_class_name}}</span>
                            <span class="text badge badge-pill badge-warning">{{item.school_title}}</span>
                            <span class="text badge badge-pill badge-light">{{item.belong}}</span>
                            <router-link :to="'/detail/' + item.school_name">
                            <button type="button" class="btn btn-danger btn-sm">查看详情</button>
                            </router-link>
                        </div>
                </li>
                 <li class="reset" style="font-size:15px; margin-left:180px;" >
                     <el-button type="text" @click="handleChangeshow">重置数据</el-button>
                </li>
            </ul>

            <ul v-else>
                <li>
                <!-- 超过两个学校的省份，中间栏目只显示两个，查看更多需要点击按钮然后侧边显示 -->
                        <div class="img-wrapper ">
                            <img class="img" :src="data[0].icon_url">
                            <span class="text">{{data[0].school_name}}</span>
                            <span class="text badge badge-pill badge-danger">Rank：{{data[0].order}}</span>
                            <span class="text badge badge-pill badge-primary">{{data[0].dual_class_name}}</span>
                            <span class="text badge badge-pill badge-warning">{{data[0].school_title}}</span>
                            <span class="text badge badge-pill badge-light">{{data[0].belong}}</span>
                            <router-link :to="'/detail/' + data[0].school_name">
                            <button type="button" class="btn btn-danger btn-sm">查看详情</button>
                            </router-link>
                        </div>
                </li>
                <li >
                        <div class="img-wrapper ">
                            <img class="img" :src="data[1].icon_url">
                            <span class="text">{{data[1].school_name}}</span>
                            <span class="text badge badge-pill badge-danger">Rank：{{data[1].order}}</span>
                            <span class="text badge badge-pill badge-primary">{{data[1].dual_class_name}}</span>
                            <span class="text badge badge-pill badge-warning">{{data[1].school_title}}</span>
                            <span class="text badge badge-pill badge-light">{{data[1].belong}}</span>
                            <router-link :to="'/detail/' + data[1].school_name">
                            <button type="button" class="btn btn-danger btn-sm">查看详情</button>
                            </router-link>
                        </div>
                </li>
                <li class="reset" style="font-size:15px; margin-left:180px;" >
                     <el-button type="text" @click="handleChangeshow">重置数据</el-button>
                </li>
            </ul>
        </div>
        <div class="school-list" v-show="true">
            <!-- <ul v-for="(page,index) of pages" :key="page">
              <div v-if="index === 0">
                <li  v-for="item of page" :key="item.school_name" class="item-li border-topbottom" >
                    <div class="img-wrapper ">
                          <img class="img" :src="item.icon_url">
                          <span class="text">{{item.school_name}}</span>
                          <span class="text badge badge-pill badge-danger">Rank：{{item.order}}</span>
                          <span class="text badge badge-pill badge-primary">{{item.dual_class_name}}</span>
                          <span class="text badge badge-pill badge-warning">{{item.school_title}}</span>
                          <span class="text badge badge-pill badge-light">{{item.belong}}</span>
                          <router-link :to="'/detail/' + item.school_name">
                          <button type="button" class="btn btn-danger btn-sm">查看详情</button>
                          </router-link>
                    </div>
                </li>
              </div>
              <el-pagination
              v-if="index === 0"
              @current-change="handleCurrentChange()"
              layout="prev, pager, next"
              :total="50">
              </el-pagination>
            </ul> -->
            <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
              <li v-for=" item in realList" :key="item" class="item-li border-topbottom">
                   <div class="img-wrapper ">
                          <img class="img" :src="item.icon_url">
                          <span class="text">{{item.school_name}}</span>
                          <span class="text badge badge-pill badge-danger">Rank：{{item.order}}</span>
                          <span class="text badge badge-pill badge-primary">{{item.dual_class_name}}</span>
                          <span class="text badge badge-pill badge-warning">{{item.school_title}}</span>
                          <span class="text badge badge-pill badge-light">{{item.belong}}</span>
                          <router-link :to="'/detail/' + item.school_name">
                          <button type="button" class="btn btn-danger btn-sm">查看详情</button>
                          </router-link>
                    </div>
              </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
  name: 'CenterScreen',
  props: {
    data: Array,
    province: String,
    rightschooltype: String
  },
  data () {
    return {
      show: false,
      currentpage: 0,
      realList: []
    }
  },
  methods: {
    handleChangeshow () {
      this.$emit('getDataReset')
    },
    handleCurrentChange () {
      this.currentpage += 1
    },
    getschoollist () { // 根据学校类型获取院校列表
      if (!this.rightschooltype) {
        this.realList = this.data
      } else {
        this.data.forEach(item => {
          if (item.school_type === this.rightschooltype) {
            this.realList.push(item)
          }
        })
      }
    }
  },
  watch: {
    province () {
      this.show = false
      this.realList = []
      this.getschoollist()
    },
    rightschooltype () {
      this.realList = []
      this.getschoollist()
    }
  },
  mounted () {
    this.getschoollist()
  }
}
</script>

<style scoped>
.wrapper{
    width:500px;
    height: 150px;
    position: absolute;
    left: 520px;
    font-size: 20px;
}
.title{
    text-align: center;
}
.img-wrapper{
    font-size: 10px;
    width:100%;
    height: 55px;
    display: flex;
    align-items: center;
}
.img{
    height: 100%;
}
.text{
    margin-left:5px ;
}
.btn{
    font-size:10px
}
.school-list{
    position: absolute;
    width: 490px;
    height: 340px;
    left:1050px;
    top:400px;
    /* background-color: rgb(252, 251, 250); */
}
.infinite-list{
    width:100%;
    height:100%;
    font-size:20px;
}
</style>>
